<page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
    <!--    <button (click)="add()" nz-button nzType="primary">新建</button>-->
  </ng-template>
</page-header>
<nz-card>
  <form nz-form (ngSubmit)="search()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shopId">店铺</nz-form-label>
          <nz-form-control *ngIf="isAdmin || isShow">
            <nz-select
              nzShowSearch
              [(ngModel)]="q.companyId"
              [nzPlaceHolder]="'请选择'"
              name="shopId"
              nzId="shopId"
              (ngModelChange)="companyChange($event)"
            >
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option
                *ngFor="let i of companyList; let n = index"
                [nzLabel]="i['company_name']"
                [nzValue]="i['ID']"
                [nzCustomContent]="true"
                ><div style="{{ i['ID'] == company_id ? 'color:#666DD9' : '' }}">{{ i['company_name'] }}</div></nz-option
              >
            </nz-select>
          </nz-form-control>
          <nz-form-control>
            <nz-select nzShowSearch [(ngModel)]="q.shopId" [nzPlaceHolder]="'请选择'" name="shopId" nzId="shopId">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let i of shops" [nzLabel]="i['fordeal_shop_name']" [nzValue]="i['shop_id']"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="warehouseId">发货仓库</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.warehouseId" name="warehouseId" nzId="warehouseId" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option nzLabel="佛山仓" [nzValue]="3"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-select nz-col nzMd="8" nzSm="24" [(ngModel)]="q.skuType" name="skuType" nzId="skuType" [nzPlaceHolder]="'请选择'">
              <nz-option *ngFor="let i of skuTypeOptions" [nzLabel]="i.text" [nzValue]="i.index"></nz-option>
            </nz-select>
            <input
              nz-input
              nz-col
              nzMd="16"
              nzSm="24"
              [(ngModel)]="q.skuTypeValue"
              id="skuTypeVal"
              name="skuTypeVal"
              placeholder="请输入"
            />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="externalOrderType">来源类型</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.externalOrderType" name="externalOrderType" nzId="externalOrderType" [nzPlaceHolder]="'请选择'">
              <nz-option *ngFor="let i of externalOrderTypeOptions" [nzLabel]="i.text" [nzValue]="i.index"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
        <button nz-button type="reset" (click)="reset($event)" class="mx-sm">重置</button>
      </div>
    </div>
  </form>
  <nz-space nzDirection="vertical"></nz-space>
  <nz-table
    #orderTable
    [nzData]="listOfData"
    nzSize="default"
    [nzPageSizeOptions]="[50, 100, 150, 200]"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="ps"
    [nzPageIndex]="pi"
    [nzFrontPagination]="false"
    [nzShowQuickJumper]="true"
    [nzShowSizeChanger]="true"
    (nzPageIndexChange)="pageIndexChange($event)"
    (nzPageSizeChange)="pageSizeChange($event)"
    [nzShowTotal]="totalTemplate"
  >
    <thead>
      <tr>
        <th nzAlign="center">商品</th>
        <th nzAlign="center">来源类型</th>
        <th nzAlign="center">来源单号</th>
        <th nzAlign="center">来源包裹号</th>
        <th nzAlign="center">图片</th>
        <th nzAlign="center">加入退货时间</th>
        <th nzAlign="center">处理进度</th>
        <th nzAlign="center">自动确认倒计时</th>
        <th nzAlign="center">所属店铺</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of orderTable.data">
        <tr>
          <td>
            <nz-comment>
              <nz-comment-content>
                <ng-container>
                  <nz-image
                    [nzWidth]="100"
                    [nzHeight]="100"
                    style="float: left; padding-right: 10px"
                    nzSrc="{{ data['skuImageUrl'] }}"
                  ></nz-image>
                  <p>{{ data['itemName'] }}</p>
                  <p>{{ data['skuAttribute'] }}</p>
                  <p>Fordeal SKU: {{ data['skuId'] }}</p>
                  <p>商家SKU: {{ data['skuNo'] }}</p>
                </ng-container>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td class="text-center">
            <p>{{ data['externalOrderTypeDesc'] }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['externalOrderId'] }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['trackingNumber'] }}</p>
          </td>
          <td class="text-center">
            <a (click)="viewImg(data['ssuId'])">查看图片</a>
          </td>
          <td class="text-center">
            <p>{{ data['joinReturnDate'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</p>
          </td>
          <td class="text-center">
            <div id="orderUpdateStateBox">
              <div class="orderUpdateStateInfo" style="margin-bottom: 10px" *ngIf="data['refundProcess']; else elseTemplate">
                <span
                  title="最后更新：{{ data['refundProcess']['lastUpdateUser'] }} {{
                    correctDatetime(data['refundProcess']['lastUpdateAt'])
                  }}"
                  >{{ data['refundProcess']['lastProcessDate'] }}：{{ data['refundProcess']['lastProcessContent'] }}</span
                >
                <span style="color: red" *ngIf="data['refundProcess']['updateAtOverTime']"
                  ><br />{{ data['refundProcess']['updateAtOverTime'] }}</span
                >
              </div>
              <ng-template #elseTemplate>
                <div class="orderUpdateStateInfo" style="margin-bottom: 10px">
                  <span style="color: red">未跟踪</span>
                </div>
              </ng-template>
              <a
                nz-button
                (click)="refund_process(data['shopId'], data['externalOrderId'], data['trackingNumber'], data['ssuId'])"
                class="set_purchase"
                >编辑进度</a
              >
            </div>
          </td>
          <td class="text-center">
            <p>{{ data['returnCountDown'] }}</p>
          </td>
          <td class="text-center">{{ shopMap[data['shopId']] }}</td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
</nz-card>
